<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="copyright" content="Copyright &#169; 2011 &lt;a href=&quot;mailto:gomezn.alejandro@gmail.com&quot;&gt;Manuel Alejandro Gómez Nicasio&lt;/a&gt;." />
        <title>Programación Web</title>
        <script charset="utf-8" type="text/javascript" src="../slidy2/scripts/slidy.js" ></script>
        <link rel="stylesheet" type="text/css" media="screen, projection, print" href="../slidy2/styles/slidy.css" />
        <link rel="stylesheet" type="text/css" media="screen, projection, print" href="./css/pw.css" />
        <link rel="stylesheet" type="text/css" media="screen, projection, print" href="./css/styles.css" />
    </head>

    <body>
        <div class="background"></div>

        <div class="slide cover">
            <h1>Programación Web</h1>
            <p class="explanation"><a href="mailto:gomezn.alejandro@gmail.com">Manuel Alejandro Gómez Nicasio</a></p>
        </div>

        <div class="slide cover">
            <h1>Lenguajes de marcado y estilo</h1>
        </div>


        <div class="slide">
            <h1>Estándares Web</h1>
            <ul>
                <li>¿Qué es el <abbr title="World Wide Web Consortium" lang="en">W3C</abbr>?
                    <blockquote>
                        <p>El Consorcio World Wide Web (W3C, <span lang="en">World Wide Web Consortium</span>) 
                            es una comunidad internacional donde las organizaciones miembro, 
                            personal a tiempo completo y el público en general trabajan 
                            conjuntamente para desarrollar estándares Web. La misión del 
                            W3C es guiar la Web hacia su máximo potencial. <a href="http://www.w3c.es/Consorcio/">#</a></p>
                    </blockquote>
                </li>
                <li>¿Qué es un estándar Web?
                    <p>Los estándares del W3C definen una plataforma Web abierta para
                        el desarrollo de aplicaciones que permita crear experencias
                        altamente interactivas.
                    </p>
                    <p>El W3C desarrolla especificaciones técnicas y directrices a través 
                        de un proceso que ha sido diseñado para maximizar el consenso sobre 
                        el contenido de un informe técnico, de forma que se pueda asegurar 
                        la alta calidad técnica y editorial, así como obtener un mayor 
                        apoyo desde el W3C y desde la comunidad en general. <a href="http://www.w3.org/standards/" lang="en">#</a></p>
                </li>
            </ul>
        </div>
        <div class="handout">
            <p>Enlaces complementarios.</p>
            <ul>
                <li><a href="http://www.w3.org/">W3C</a>.</li>
                <li><a href="http://www.w3c.es/">W3C España</a>.</li>
            </ul>
        </div>

        <div class="slide">
            <h1>HTML</h1>
            <p><abbr title="Hyper Text Markup Language" lang="en">HTML</abbr> (HyperText Markup Language) es el lenguaje de publicación de la World Wide Web.</p>
            <ul>
                <li>La primer versión de HTML se publicó a finales de 1991.</li>
                <li>La versión más reciente de HTML es la 4.01, que data de Diciembre de 1999.</li>
                <li>La versión cinco de HTML (<a href="http://www.w3.org/TR/html5/">HTML 5</a>) se encuentra en fase de desarrollo.</li>
            </ul>
        </div>
        <div class="handout">
            <p>Enlaces útiles.</p>
            <ul>
                <li><a href="http://www.w3.org/TR/html401/" lang="en">HTML 4.01 Specification</a></li>
                <li><a href="http://html.conclase.net/w3c/html401-es/cover.html">HTML 4.01 Specification, traducción al español.</a></li>
                <li><a href="http://www.w3.org/html/">W3C HTML</a>.</li>
            </ul>
        </div>

        <div class="slide"></div>


        <div class="slide"></div>


        <div class="slide">
            <h1 style="font-size: 100%">XHTML&trade; 1.0 El lenguaje extensible de marcado de hipertexto (segunda edición)<sup><a href="#xhtml">1</a></sup></h1>
            <dl>
                <dt>XHTML&trade; 1.0 El lenguaje extensible de marcado de hipertexto (segunda edición)</dt>
                <dd>Versión oficial. <a href="http://www.w3.org/TR/xhtml1/">#</a></dd>
                <dd>Versión en <abbr title="Portable Document Format" lang="en">PDF</abbr>. <a href="http://www.w3.org/TR/xhtml1/xhtml1.pdf">#</a></dd>
            </dl>
            <ul>
                <li>Una reformulación de HTML 4 en XML 1.0</li>
                <li>Recomendación del W3C del 26 de enero de 2000, revisado el 1 de agosto de 2002</li>
            </ul>
            <p>
                Esta especificación define la segunda edición de XHTML 1.0, una 
                reformulación de HTML 4 como una aplicación de XML 1.0, y tres <abbr title="Document Type Definitions" lang="en">DTDs</abbr> correspondientes 
                a las definidas por HTML 4. La semántica de los elementos y sus atributos se 
                definen en la Recomendación del W3C para HTML 4. Esta semántica proporciona 
                las bases para futuras ampliaciones de XHTML. Compatibilidad con los agentes 
                de usuario HTML es posible siguiendo un pequeño conjunto de directrices.
            </p>
            <div class="footnote">
                <p id="xhtml" lang="en"><sup>1</sup>XHTML&trade; 1.0 The Extensible HyperText Markup Language (Second Edition). <a href="http://www.w3.org/TR/xhtml1/">#</a></p>
            </div>
        </div>

        <div class="slide">
            <h1>Listas<sup><a href="#lists">*</a></sup></h1>
            <div>
                <p></p>
            </div>
            <div class="footnote">
                <p id="lists"><sup>*</sup>Lists. <a href="http://www.w3.org/TR/html401/struct/lists.html">#</a></p>
            </div>
        </div>
        
        <div class="slide element">
            <h1>Listas. Elemento <samp>ul</samp></h1>
            <h2><samp>ul</samp> <a href="http://www.w3.org/TR/html401/struct/lists.html#h-10.2" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(LI)+</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
        
        <div class="slide element">
            <h1>Listas. Elemento <samp>ol</samp></h1>
            <h2><samp>ol</samp> <a href="http://www.w3.org/TR/html401/struct/lists.html#h-10.2" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(LI)+</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
        
        <div class="slide element">
            <h1>Listas. Elemento <samp>li</samp></h1>
            <h2><samp>li</samp> <a href="http://www.w3.org/TR/html401/struct/lists.html#h-10.2" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(%flow;)*</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
        
        <div class="slide element">
            <h1>Listas. Elemento <samp>dl</samp></h1>
            <h2><samp>dl</samp> <a href="http://www.w3.org/TR/html401/struct/lists.html#h-10.3" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(dt|dd)+</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
        
        <div class="slide element">
            <h1>Listas. Elemento <samp>dt</samp></h1>
            <h2><samp>dt</samp> <a href="http://www.w3.org/TR/html401/struct/lists.html#h-10.3" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(%Inline;)</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
        
        <div class="slide element">
            <h1>Listas. Elemento <samp>dd</samp></h1>
            <h2><samp>dd</samp> <a href="http://www.w3.org/TR/html401/struct/lists.html#h-10.3" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(%Flow;)</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
        
        <div class="slide">
            <h1>Tablas<sup><a href="#tables">*</a></sup></h1>
            <div>
                <p>El modelo de tablas permite organizar datos en filas y en columnas.</p>
                <p>Cada tabla puede tener un título asociado que proporciona una 
                    descripción corta del propósito de de la tabla. Se puede proporcionar 
                    también una descripción más larga para el provecho de las personas que 
                    utilicen agentes de usuario basados en Braille o en voz.</p>
                <p>Las filas de una tabla pueden agruparse en secciones de encabezado, 
                    pie y cuerpo. Las columnas también se pueden agrupar para 
                    proporcionar información estructural adicional.</p>
                <p>Las celdas de la tabla puede contener o bien información de 
                    "encabezado" o de "datos". Las celdas pueden ocupar varias 
                    filas y columnas.</p>
                <p>Las tablas no deberían usarse con la única finalidad de organizar
                    la presentación de los contenidos de un documento, ya que esto 
                    puede ocasionar problemas cuando se represente en un medio no visual.
                    Para minimizar estos problemas, los autores deberían usar hojas 
                    de estilo en lugar de tablas para organizar la presentación.
                </p>
            </div>
            <div class="footnote">
                <p id="tables"><sup>*</sup>Tables. <a href="http://www.w3.org/TR/html401/struct/tables.html">#</a></p>
            </div>
        </div>        

        <div class="slide element">
            <h1>Tablas. Elemento <samp>table</samp></h1>
            <h2><samp>table</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>summary</td><td>%Text;</td><td></td></tr>
                    <tr><td>width</td><td>%Length;</td><td></td></tr>
                    <tr><td>border</td><td>%Pixels;</td><td></td></tr>
                    <tr><td>frame</td><td>(void | above | below | hsides | lhs | rhs | vsides | box | border)</td><td></td></tr>
                    <tr><td>rules</td><td>(none | groups | rows | cols | all)</td><td></td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>caption</samp></h1>
            <h2><samp>caption</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.2" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(%inline;)</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>thead</samp></h1>
            <h2><samp>thead</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(tr)+</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>tbody</samp></h1>
            <h2><samp>tbody</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(tr)+</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>tfoot</samp></h1>
            <h2><samp>tfoot</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(tr)+</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>colgroup</samp></h1>
            <h2><samp>colgroup</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(col)*</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>span</td><td>%Number;</td><td>1</td></tr>
                    <tr><td>width</td><td>%MultiLength;</td><td></td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>col</samp></h1>
            <h2><samp>col</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>EMPTY</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>span</td><td>%Number;</td><td>1</td></tr>
                    <tr><td>width</td><td>%MultiLength;</td><td></td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>tr</samp></h1>
            <h2><samp>tr</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(th|td)+</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>th</samp></h1>
            <h2><samp>th</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(%Flow;)</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>abbr</td><td>%Text;</td><td></td></tr>
                    <tr><td>axis</td><td>%Text;</td><td></td></tr>
                    <tr><td>headers</td><td>%Text;</td><td></td></tr>
                    <tr><td>scope</td><td>(row|col|rowgroup|colgroup)</td><td></td></tr>
                    <tr><td>rowspan</td><td>%Number;</td><td>1</td></tr>
                    <tr><td>colspan</td><td>%Number;</td><td>1</td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>

        <div class="slide element">
            <h1>Tablas. Elemento <samp>td</samp></h1>
            <h2><samp>td</samp> <a href="http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6" rel="external" title="Descripción oficial de elemento."><sup>&sect;</sup></a></h2>
            <p>(%Flow;)</p>
            <table>
                <thead>
                    <tr>
                        <th>Atributos</th>
                        <th>Valores</th>
                        <th>¿Requerido?</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>%attrs;</td><td></td><td></td></tr>
                    <tr><td>abbr</td><td>%Text;</td><td></td></tr>
                    <tr><td>axis</td><td>%Text;</td><td></td></tr>
                    <tr><td>headers</td><td>%Text;</td><td></td></tr>
                    <tr><td>scope</td><td>(row|col|rowgroup|colgroup)</td><td></td></tr>
                    <tr><td>rowspan</td><td>%Number;</td><td>1</td></tr>
                    <tr><td>colspan</td><td>%Number;</td><td>1</td></tr>
                    <tr><td>align</td><td>(left|center|right|justify|char)</td><td></td></tr>
                    <tr><td>char</td><td>%Character;</td><td></td></tr>
                    <tr><td>charoff</td><td>%Length;</td><td></td></tr>
                    <tr><td>valign</td><td>(top|middle|bottom|baseline)</td><td></td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

